<template>
    <nav class="app-topnav">
        <div class="container">
            <ul>
                <template v-if="profile.token">
                    <li><router-link to="member"><i class="iconfont icon-user"></i>{{profile.account}}</router-link></li>
                    <li><a @click="loginOut" href="javascript:;">退出登录</a></li>
                </template>
                <template v-else>
                    <li><router-link to="/login">请先登录</router-link></li>
                    <li><a href="javascript:;">免费注册</a></li>
                </template>
                <li><a href="javascript:;">我的订单</a></li>
                <li><a href="javascript:;">会员中心</a></li>
                <li><a href="javascript:;">帮助中心</a></li>
                <li><a href="javascript:;">关于我们</a></li>
                <li><a href="javascript:;"><i class="iconfont icon-phone"></i>手机版</a></li>
            </ul>
        </div>
    </nav>
</template>

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
export default {
    name: 'AppTopnav',
    setup() {
        //获取用户登陆信息 控制切换导航菜单
        const stoer = useStore()

        const profile = computed(() => {
            return stoer.state.user.profile
        })

        //推出登陆功能
        const router = useRouter()
        const loginOut = () => {
            //1.清空用户信息
            stoer.commit('user/setUser',{})
            //2.清空购物车
            stoer.commit('cart/setCart',[])
            router.push('/login')
        }

        return {
            profile,
            loginOut
        }
    }
}
</script>

<style lang="less" scoped>
.app-topnav {
    background: #333;

    ul {
        display: flex;
        height: 53px;
        justify-content: flex-end;
        align-items: center;

        li {
            a {
                padding: 0 15px;
                color: #cdcdcd;
                line-height: 1;
                display: inline-block;

                i {
                    font-size: 14px;
                    margin-right: 2px;
                }

                &:hover {
                    color: @xtxColor;
                }
            }

            ~li {
                a {
                    border-left: 2px solid #666;
                }
            }
        }
    }
}
</style>